<link rel="stylesheet" href="__CDN__/assets/addons/health/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/health/libs/common.css">
<style>
    #trackingUrlIndex {
        background: #fff;
        border-radius: 10px 10px 0px 0px;
        color: #444;
        font-weight: 500;
    }

    .el-tabs__nav {
        margin-left: 30px;
    }

    .el-tabs__header {
        margin-bottom: 0;
    }

    .el-tabs__item {
        margin-bottom: 8px;
        width: 120px;
    }

    .el-tabs__active-bar {
        width: 80px !important;
        left: 10px;
        height: 3px;
    }

    .el-tabs--top .el-tabs__item.is-top:last-child {
        padding-right: 20px;
    }

    .custom-tabs {
        padding-top: 12px;
    }

    .custom-body {
        padding: 0 30px;
    }

    .custom-body-header {
        padding: 20px 0;
        color: black;
        font-weight: 600;
    }

    [v-cloak] {
        display: none
    }

    #ring-right {
        margin-top: 6px;
    }

    .ring-right-position {
        /* background: #f00; */
        width: 246px;
        height: 246px;
        border: 41px solid rgba(255, 255, 255, 1);
        box-shadow: 0px 10px 30px 0px rgba(73, 111, 253, 0.12);
        border-radius: 50%;
        left: 50%;
        top: 50%;
        margin-top: -123px;
        margin-left: -123px;
        position: absolute;
    }

    .ring-right-position-inner {
        width: 140px;
        height: 140px;
        background: #f3f6fe;
        border-radius: 50%;
        left: 50%;
        top: 50%;
        margin-top: -70px;
        margin-left: -70px;
        position: absolute;
    }
</style>
<script src="__CDN__/assets/addons/health/libs/vue.js"></script>
<script src="__CDN__/assets/addons/health/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/health/libs/moment.js"></script>
<div id="trackingUrlIndex" v-cloak>
    <div class="custom-tabs">
        <el-tabs v-model="activeTabName" @tab-click="tabClick">
            <el-tab-pane v-for="(item,index) in codeMap" :label="item.title" :name="item.code"></el-tab-pane>
        </el-tabs>
    </div>
    <div class="custom-body" v-if="codeData">
        <div class="custom-body-header">汇总数据</div>
        <el-row :gutter="20">
            <el-col :span="8">
                <div>
                    <el-statistic group-separator="," :precision="0" :value="Number(codeData.summary.put_in_count||0)"
                        title="短信投放数量">
                    </el-statistic>
                </div>
            </el-col>
            <el-col :span="8">
                <div>
                    <el-statistic title="小程序打开次数" :value="Number(codeData.summary.click_num_count||0)">
                    </el-statistic>
                </div>
            </el-col>
            <el-col :span="8">
                <div>
                    <el-statistic :precision="2" title="点击率" suffix="%" :value="Number(codeData.summary.rate)">
                    </el-statistic>
                </div>
            </el-col>
        </el-row>
        <div class="custom-body-header">明细数据</div>
        <div style="padding-bottom: 20px;">
            <el-table :data="lists" style="width: 100%">
                <el-table-column prop="day" align="center" label="日期">
                </el-table-column>
                <el-table-column prop="put_in" align="center" label="投放数量">
                </el-table-column>
                <el-table-column prop="click_num" align="center" label="点击数量">
                </el-table-column>
                <el-table-column prop="rate" align="center" label="点击率">
                </el-table-column>
            </el-table>
            <div class="page-container display-flex">
                <el-pagination :hide-on-single-page="true" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-size="pageSize" background layout="prev, pager, next"
                    :total="totalPage"></el-pagination>
            </div>
        </div>
    </div>
</div>